<template>
  <!-- fullScreen -->
  <v-scale-screen
    width="1920"
    height="1080"
    :boxStyle="boxStyle"
    bodyOverflowHidden
  >
    <div id="app" style="display: flex; flex-direction: column; padding: 20px">
      <!-- top -->
      <div
        style="
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-between;
        "
      >
        <div>
          <img
            src="./assets/images/top/title.gif"
            width="100px"
            height="100px"
            alt=""
          />
          <img
            src="./assets/images/top/title_text.png"
            width="500px"
            height="100px"
            style="margin-left: 20px"
            alt=""
          />
        </div>
        <div style="line-height: 100px; font-size: 40px; color: white">
          {{ currentDateTime }}
        </div>
      </div>

      <!-- ---------------------------------------------------------------------------------------------------------------------------- -->
      <div style="display: flex; height: 900px">
        <!-- left -->
        <div
          style="
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            word-wrap: break-word;
          "
        >
          <div
            style="margin-top: 80px"
            v-for="(item, index) in leftData"
            :key="index"
          >
            <div style="position: relative">
              <img
                width="100%"
                height="70px"
                style="position: absolute"
                src="./assets/images/left_right/left_border.png"
                alt=""
              />
              <img
                width="100%"
                height="12px"
                style="position: absolute; top: 50px"
                src="./assets/images/left_right/left_border_line.png"
                alt=""
              />
              <div
                style="
                  position: absolute;
                  font-size: 25px;
                  color: #6abcfc;
                  left: 80px;
                  top: 15px;
                  font-weight: bold;
                "
              >
                {{ item.text }}
              </div>
              <span
                style="
                  position: absolute;
                  color: white;
                  left: 250px;
                  top: 9px;
                  font-size: 35px;
                  font-weight: bold;
                "
                >{{ item.value }}</span
              >
            </div>
          </div>

          <div
            style="
              margin-top: 120px;
              width: 100%;
              height: 50px;
              background-color: #0c2946;
              position: relative;
            "
          >
            <img
              src="./assets//images/left_right/left_arrow.png"
              style="position: absolute; top: 10px; left: 80px"
              alt=""
            />
            <span
              style="
                position: absolute;
                top: 10px;
                left: 130px;
                font-size: 20px;
                color: #6abcfc;
                font-weight: bold;
              "
              >生产区域关注</span
            >
            <img
              src="./assets/images/left_right/right_arrow.png"
              style="position: absolute; top: 10px; right: 80px"
              alt=""
            />
            <div style="margin-top: 80px">
              <div
                style="margin-top: 18px"
                v-for="(item, index) in arerExceptionList"
                :key="index"
              >
                <div style="display: flex; justify-content: space-between">
                  <span
                    style="color: white; font-size: 20px; font-weight: bold"
                    >{{ item.title }}</span
                  >
                  <span
                    style="color: #64d6ff; font-size: 25px; font-weight: bold"
                    >{{ item.text }}</span
                  >
                </div>
                <progress
                  style="
                    width: 100%;
                    height: 10px;
                    color: #64d6ff;
                    background-color: #64808f;
                    border-radius: 10px;
                  "
                  :value="item.value"
                  max="100"
                ></progress>
              </div>
            </div>
          </div>
        </div>
        <!-- center -->
        <div style="flex: 3; overflow: hidden; word-wrap: break-word">
          <div class="center_image-container"></div>
          <!-- <img
            width="100%"
            height="100%"
            src="./assets/images/center/bg_center.png"
            alt=""
          /> -->
        </div>
        <!-- right -->
        <div
          style="
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            word-wrap: break-word;
          "
        >
          <!-- 1 -->
          <div>
            <div
              style="
                margin-top: 80px;
                width: 100%;
                height: 50px;
                background-color: #0c2946;
                position: relative;
              "
            >
              <img
                src="./assets//images/left_right/left_arrow.png"
                style="position: absolute; top: 10px"
                alt=""
              />
              <span
                style="
                  position: absolute;
                  top: 10px;
                  font-size: 20px;
                  left: 50px;
                  color: #6abcfc;
                  font-weight: bold;
                "
                >监控板块</span
              >
            </div>
            <div class="scrolling-container">
              <div class="scrolling-content">
                <div v-for="(item, index) in warnMessages" :key="index">
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <!-- 2 -->
          <div>
            <div
              style="
                margin-top: 20px;
                width: 100%;
                height: 50px;
                background-color: #0c2946;
                position: relative;
              "
            >
              <img
                src="./assets//images/left_right/left_arrow.png"
                style="position: absolute; top: 10px"
                alt=""
              />
              <span
                style="
                  position: absolute;
                  top: 10px;
                  font-size: 20px;
                  left: 50px;
                  color: #6abcfc;
                  font-weight: bold;
                "
                >车间生产信息安全总览</span
              >
            </div>
            <div ref="chart1" style="width: 380px; height: 250px"></div>
          </div>
          <!-- 3 -->
          <div>
            <div
              style="
                margin-top: 20px;
                width: 100%;
                height: 50px;
                background-color: #0c2946;
                position: relative;
              "
            >
              <img
                src="./assets//images/left_right/left_arrow.png"
                style="position: absolute; top: 10px"
                alt=""
              />
              <span
                style="
                  position: absolute;
                  top: 10px;
                  font-size: 20px;
                  left: 50px;
                  color: #6abcfc;
                  font-weight: bold;
                "
                >管理服务中台波谷图</span
              >
            </div>
            <div ref="chart2" style="width: 380px; height: 250px"></div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import VScaleScreen from 'v-scale-screen'
import schedule from 'node-schedule'
import * as echarts from 'echarts'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    VScaleScreen,
  },
  data() {
    return {
      boxStyle: { background: '#19446F' },
      currentDateTime: null,
      dailyTask: null, // 每天的任务定时器
      intervalId: null,
      leftData: [
        {
          text: '设备执勤总数',
          value: '157',
        },
        {
          text: '设备执勤异常',
          value: '00',
        },
        {
          text: '未启动异常',
          value: '00',
        },
      ],

      // 区域异常排行
      arerExceptionList: [
        {
          title: '自动化贴标写码设备',
          value: 80,
          text: '待机',
        },
        {
          title: '高速线缆贴标写码',
          value: 75,
          text: '300 PCS',
        },
        {
          title: '产线写码设备',
          value: 60,
          text: '75 在写工位',
        },
        {
          title: '滚装线起始工位监控',
          value: 50,
          text: '流动状态',
        },
        {
          title: '滚装线中转工位监控',
          value: 40,
          text: '运转中',
        },
        {
          title: '滚装线结束工位监控',
          value: 10,
          text: '等待结束',
        },
      ],
      // 异常数量
      warnMessages: [
        '设备点位H2的传输速度异常迅猛',
        '写码监听中...',
        '编码监听中...',
        '自动化设备启动...',
      ],
    }
  },
  mounted() {
    this.initEcChart1()
    this.initEcChart2()

    // 每隔2秒调用一次getWaringMsg方法
    const that = this
    that.intervalId = setInterval(() => {
      that.getWaringMsg()
      this.getProAreaData()
    }, 3000)

    // 开启报警信息滚动
    this.startScrolling()

    this.$nextTick(() => {
      // 每天0点0分0秒执行 刷新
      // second (0-59)
      // minute (0-59)
      // hour (0-23)
      // date (1-31)
      // month (0-11)
      this.dailyTask = this.scheduleTask(0, 0, 0, this.initEcChart2)
    })
  },
  created() {
    this.updateCurrentDateTime() // 在组件创建时获取当前日期时间
    // 每秒更新一次当前日期时间
    setInterval(this.updateCurrentDateTime, 1000)
  },
  beforeDestroy() {
    // 在组件销毁时取消定时任务
    if (this.dailyTask) {
      this.dailyTask.cancel()
    }
  },
  methods: {
    scheduleTask(hour, minute, second, taskFunction) {
      // 设置定时器规则，每天的指定时间执行任务
      const rule = new schedule.RecurrenceRule()
      rule.hour = hour
      rule.minute = minute
      rule.second = second

      // 创建定时任务
      const job = schedule.scheduleJob(rule, taskFunction)

      // 返回定时任务对象，以便在需要的时候取消任务
      return job
    },
    updateCurrentDateTime() {
      this.currentDateTime = this.formatCurrentDateTime() // 获取完整的日期时间字符串
    },

    formatCurrentDateTime() {
      // 获取当前日期和时间
      const currentDateTime = new Date()

      // 提取年、月、日、时、分、秒
      const year = currentDateTime.getFullYear()
      const month = currentDateTime.getMonth() + 1
      const day = currentDateTime.getDate()
      const hours = currentDateTime.getHours()
      const minutes = currentDateTime.getMinutes()
      const seconds = currentDateTime.getSeconds()
      // 获取当前是周几
      const daysOfWeek = [
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
        '星期天',
      ]
      const weekday = daysOfWeek[currentDateTime.getDay() - 1]
      // 格式化为字符串
      const formattedDateTime =
        year +
        '-' +
        (month < 10 ? '0' : '') +
        month +
        '-' +
        (day < 10 ? '0' : '') +
        day +
        ' ' +
        weekday +
        ' ' +
        (hours < 10 ? '0' : '') +
        hours +
        ':' +
        (minutes < 10 ? '0' : '') +
        minutes +
        ':' +
        (seconds < 10 ? '0' : '') +
        seconds

      return formattedDateTime
    },
    getLayDaysAgo(layDay) {
      // 获取当前日期
      const currentDate = new Date()

      // 获取前两天的日期
      const twoDaysAgo = new Date(currentDate)
      twoDaysAgo.setDate(currentDate.getDate() - layDay)

      // 提取年、月、日
      const year = twoDaysAgo.getFullYear()
      // 月份是从 0 开始的，所以要加 1
      const month = twoDaysAgo.getMonth() + 1
      const day = twoDaysAgo.getDate()

      // 返回结果
      return year + '/' + month + '/' + day
    },
    initEcChart1() {
      let myChart = echarts.getInstanceByDom(this.$refs.chart1)
      if (!myChart) {
        myChart = echarts.init(this.$refs.chart1)
      }
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '',
          textStyle: {
            color: 'white', // 标题文本颜色为白色
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          bottom: 35, // 增加底部边距，根据需要调整值
        },
        legend: {
          // data: ['柱状图1', '柱状图2', '折线图'],
          textStyle: {
            color: 'white', // 图例文本颜色为白色
          },
          // 调整图例的位置和偏移
          // left: 'right', // 图例位于右侧
          top: 'top', // 图例顶部对齐
          padding: [25, 0, 0, 0], // 通过 padding 属性微调位置
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: 'white', // X轴标签文本颜色为白色
          },
          data: ['生产网络', '生产数据库', '生产中台'],
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 1000,
            position: 'left',

            axisLabel: {
              color: 'white', // 左侧Y轴标签文本颜色为白色
              margin: 0,
            },
            splitLine: {
              show: false, // 取消Y轴分割线
            },
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 800,
            position: 'right',
            axisLabel: {
              color: 'white', // 右侧Y轴标签文本颜色为白色
            },
            splitLine: {
              show: false, // 取消Y轴分割线
            },
          },
        ],
        series: [
          {
            name: '生产数据使用',
            data: [450, 750, 700],
            type: 'bar',
            itemStyle: {
              color: '#2f60ef', // 指定柱状图2的颜色
            },
            barWidth: 10,
          },
          {
            name: '生产信息安全',
            data: [400, 220, 400],
            type: 'bar',
            itemStyle: {
              color: '#00c8ec', // 指定柱状图2的颜色
            },
            barWidth: 10,
          },
          {
            name: '生产数据使用',
            data: [450, 750, 700],
            type: 'line',
            itemStyle: {
              color: '#2f60ef', // 指定柱状图2的颜色
            },
          },
          {
            name: '生产信息安全',
            data: [400, 220, 400],
            type: 'line',
            itemStyle: {
              color: '#00c8ec', // 指定柱状图2的颜色
            },
          },
        ],
      }

      myChart.setOption(option)
    },
    initEcChart2() {
      let myChart = echarts.getInstanceByDom(this.$refs.chart2)
      if (!myChart) {
        myChart = echarts.init(this.$refs.chart2)
      }
      // 指定图表的配置项和数据
      const option = {
        xAxis: {
          type: 'category',
          axisLabel: {
            color: 'white', // X轴标签文本颜色为白色
          },
          data: [
            this.getLayDaysAgo(2),
            this.getLayDaysAgo(1),
            this.getLayDaysAgo(0),
          ],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white', // X轴标签文本颜色为白色
          },
          // lineStyle: {
          //   color: '#0c1c2d', // 调整Y轴横线的颜色
          // },
          splitLine: {
            show: false, // 取消Y轴分割线
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        // legend: {
        //   data: ['系列1', '系列2'], // 增加图例
        //   textStyle: {
        //     color: 'white', // 图例文本颜色为白色
        //   },
        // },
        grid: {
          bottom: 55, // 增加底部边距，根据需要调整值
        },
        legend: {
          // data: ['柱状图1', '柱状图2', '折线图'],
          textStyle: {
            color: 'white', // 图例文本颜色为白色
          },
          // 调整图例的位置和偏移
          // left: 'right', // 图例位于右侧
          top: 'top', // 图例顶部对齐
          padding: [25, 0, 0, 0], // 通过 padding 属性微调位置
        },
        series: [
          {
            name: '生产服务器I/O使用',
            data: [400, 600, 550],
            type: 'line',
            itemStyle: {
              color: '#2f60ef', // 指定柱状图2的颜色
            },
          },
          {
            name: '生产服务器RIO',
            data: [350, 500, 600],
            type: 'line',
            itemStyle: {
              color: '#00c8ec', // 指定柱状图2的颜色
            },
          },
        ],
      }

      myChart.setOption(option)
    },
    startScrolling() {
      // Check if content exceeds container height
      const container = document.querySelector('.scrolling-container')
      const contents = document.querySelectorAll('.scrolling-content')

      contents.forEach((content) => {
        if (content.scrollHeight > container.clientHeight) {
          content.classList.add('scroll')
        }
      })
    },

    getWaringMsg() {
      fetch('http://10.36.230.100:5556/api/getWaringMsg')
        .then((response) => response.json())
        .then((data) => {
          // this.data = data
          const tempArr = []
          if (data.code == 200) {
            // console.log('222,data', data.data)
            data.data.forEach((item) => {
              tempArr.push(item.warningMessage)
            })
            this.warnMessages = tempArr
          }
        })
        .catch((error) => {
          console.error('Error fetching data:', error)
        })
    },
    getProAreaData() {
      fetch('http://10.36.230.100:5556/api/getProAreaData')
        .then((response) => response.json())
        .then((data) => {
          // this.data = data

          if (data.code == 200) {
            // console.log('222,data', data.data)
            this.arerExceptionList = data.data
          }
        })
        .catch((error) => {
          console.error('Error fetching data:', error)
        })
    },
  },
}
</script>

<style>
#app {
  /* padding: 0; */
}
/* 修改进度条背景颜色（仅适用于Webkit核心浏览器） */
progress::-webkit-progress-bar {
  background-color: #64808f;
  border-radius: 10px;
}

/* 修改进度条填充颜色 */
progress::-webkit-progress-value {
  background-color: #64d6ff;
  border-radius: 10px;
}
.center_image-container {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/center/bg_center.png');
  /* background-image: url('@/assets/祝贺.svg'); */
  /* background-image: url('@/assets/舞狮.svg'); */
  /*background-image: url('@/assets/发财.svg'); */
  background-size: cover;
}

* {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
}
.scrolling-container {
  width: 100%;
  height: 168px;
  display: flex;
  overflow: hidden;
  position: relative;
}
.scrolling-content {
  overflow: hidden;
  word-wrap: break-word;
  color: white;
  font-size: 18px;
  margin-top: 20px;
}
.scrolling-content.scroll {
  animation: scroll 6s linear infinite;
}
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>
